<template>
  <div class="row">
    <div class="col-12">
      <span class="h3">单次提交代码量分布</span>
      <span class="fs-5 ms-5">平均: {{ commitAvg.toFixed(2) }} 行/次</span>
      <span class="fs-5 ms-5">中位数: {{ commitMedian.toFixed(2) }} 行/次</span>
      <span class="fs-5 ms-5">(10000行以内)</span>
      <apexchart
        ref="commitChartRef"
        type="bar"
        height="350"
        :options="commitChartOptions"
        :series="commitSeries"
      ></apexchart>
    </div>
  </div>
  <div class="row mt-4">
    <div class="col-12">
      <span class="h3">单人单日代码量分布(活跃日)</span>
      <span class="fs-5 ms-5">平均: {{ dailyAvg.toFixed(2) }} 行/人日</span>
      <span class="fs-5 ms-5">中位数: {{ dailyMedian.toFixed(2) }} 行/人日</span>
      <span class="fs-5 ms-5">(10000行以内)</span>
      <apexchart
        ref="dailyChartRef"
        type="bar"
        height="350"
        :options="dailyChartOptions"
        :series="dailySeries"
      ></apexchart>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { statisticsService } from '@/services/analysis/statistics.service';

const bins = [
  '0-50',
  '50-100',
  '100-150',
  '150-200',
  '200-250',
  '250-300',
  '300-400',
  '400-500',
  '500-600',
  '600-800',
  '800-1000',
  '1000-1500',
  '1500-2000',
  '2000-5000',
  '5000-10000',
  '10000+',
];

const commitChartOptions = ref({
  chart: { id: 'commit-amount-distribution' },
  xaxis: { categories: bins },
  yaxis: [{ title: { text: '提交次数' } }],
});
const commitSeries = ref([{ name: '提交次数', data: Array(bins.length).fill(0) }]);

const dailyChartOptions = ref({
  chart: { id: 'daily-engineer-amount-distribution' },
  xaxis: { categories: bins },
  yaxis: [{ title: { text: '每日输出次数' } }],
});
const dailySeries = ref([{ name: '每日输出次数', data: Array(bins.length).fill(0) }]);

const commitChartRef = ref(null);
const dailyChartRef = ref(null);

const commitAvg = ref(0);
const commitMedian = ref(0);
const dailyAvg = ref(0);
const dailyMedian = ref(0);

onMounted(async () => {
  try {
    // Fetch commit distribution
    const commitResp = await statisticsService.getCommitDistribution();
    const commitData = commitResp.distributions;
    commitAvg.value = commitResp.average;
    commitMedian.value = commitResp.median;
    const commitCounts = Array(bins.length).fill(0);
    commitData.forEach((item) => {
      const index = bins.indexOf(item.bin);
      if (index !== -1) commitCounts[index] = item.count;
    });
    commitSeries.value[0].data = commitCounts;

    // Fetch daily engineer distribution
    const dailyResp = await statisticsService.getDailyEngineerDistribution();
    const dailyData = dailyResp.distributions;
    dailyAvg.value = dailyResp.average;
    dailyMedian.value = dailyResp.median;
    const dailyCounts = Array(bins.length).fill(0);
    dailyData.forEach((item) => {
      const index = bins.indexOf(item.bin);
      if (index !== -1) dailyCounts[index] = item.count;
    });
    dailySeries.value[0].data = dailyCounts;
  } catch (error) {
    console.error('Error fetching distribution stats:', error);
  }
});
</script>
